<!-- CONTENT -->
<div id="tools-columns">
  <!-- ------------------- LEFT COLUMN -------------------------------- -->
  <div id="tools-columns-left">
    <div id="tools-menu-sticky-div">
      <div class="tools-menu-buttons">
        <button id="tool-gut-back-button" class="tools-button-accent">
          <i class="fas fa-angle-left"></i>
          <span id="tool-gut-back-button-text"></span>
        </button>
      </div>
      <div class="tools-menu-sections">
        <!-- sections menu -->
        <div
          id="tool-gut-section-0-button"
          class="tools-menu-button tools-menu-button-selected"
        >
          <i class="fas fa-search tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-gut-section-0-text"></span>
          </div>
        </div>
        <div id="tool-gut-section-1-button" class="tools-menu-button">
          <i class="fas fa-list-ul tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-gut-section-1-text"></span>
          </div>
        </div>
        <div id="tool-gut-section-2-button" class="tools-menu-button">
          <i class="fas fa-sliders-h tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-gut-section-2-text"></span>
          </div>
        </div>
        <div id="tool-gut-section-3-button" class="tools-menu-button">
          <i class="fas fa-info-circle tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-gut-section-3-text"></span>
          </div>
        </div>
        <div id="tool-gut-section-4-button" class="tools-menu-button">
          <i class="fas fa-donate tools-menu-button-icon"></i>
          <div class="tools-menu-button-text">
            <span id="tool-gut-section-4-text"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- ------------------- RIGTH COLUMN -------------------------------- -->
  <div id="tools-columns-right">
    <div id="tools-title"><span id="tool-gut-title-text"></span></div>
    <!-- search -->
    <div id="tool-gut-section-0-content-div">
      <div id="tool-search-input-div" class="tools-columns-right-section">
        <h3><span id="tool-gut-search-input-text"></span></h3>
        <div class="tools-columns-right-subsection">
          <label>
            <input
              id="tool-gut-search-input"
              type="text"
              placeholder="Search Comic Books"
              style="margin-top: 0"
              spellcheck="false"
            />
          </label>
          <button id="tool-gut-search-button" class="tools-disabled">
            <span id="tool-gut-search-button-text"></span>
          </button>
        </div>
      </div>
      <div id="tool-search-results-div" class="tools-columns-right-section">
        <h3
          id="tool-search-results-h3"
          class="tools-h3-extra-margin-top-2 set-display-none"
        >
          <span id="tool-gut-search-results-text"></span>
        </h3>
        <div class="tools-columns-right-subsection">
          <div id="tool-gut-search-results-div"></div>
        </div>
      </div>
    </div>
    <!-- open url -->
    <div id="tool-gut-section-1-content-div" class="set-display-none">
      <h3 id="tool-gut-url-text"></h3>
      <div class="tools-columns-right-subsection">
        <label>
          <input
            id="tool-gut-url-input"
            type="text"
            value="https://www.gutenberg.org/ebooks/35"
            style="margin-top: 0"
          />
        </label>
        <button id="tool-gut-open-input-url-acbr-button">
          <span id="tool-gut-open-input-url-acbr-button-text"></span>
        </button>
        <button id="tool-gut-open-input-url-browser-button">
          <span id="tool-gut-open-input-url-browser-button-text"></span>
        </button>
      </div>
    </div>
    <!-- options -->
    <div id="tool-gut-section-2-content-div" class="set-display-none">
      <h3 id="tool-gut-search-options-text"></h3>
      <div class="tools-columns-right-subsection">
        <label
          ><span id="tool-gut-options-mirrors-text"></span
          ><select id="tool-gut-options-mirrors-select"></select
        ></label>
        <label
          ><span id="tool-gut-options-search-engine-text"></span
          ><select id="tool-gut-options-search-engine-select">
            <option value="gutendex">Gutendex</option>
          </select></label
        >
      </div>

      <h3
        id="tool-gut-other-options-text"
        class="tools-h3-extra-margin-top"
      ></h3>
      <div class="tools-columns-right-subsection">
        <label>
          <span id="tool-gut-options-cache-folder-text"></span>
          <input
            type="text"
            readonly
            id="tool-gut-options-cache-folder-input"
          />
        </label>
        <button id="tool-gut-options-open-cache-folder-button">
          <span id="tool-gut-options-open-cache-folder-button-text"></span>
        </button>

        <label><span id="tool-gut-options-cache-downloads-text"></span></label>
        <label class="tools-toggle">
          <input
            type="checkbox"
            id="tool-gut-options-cache-downloads-checkbox"
            checked="checked"
          />
          <span class="tools-toggle-slider"></span>
        </label>
      </div>
    </div>
    <!-- about -->
    <div id="tool-gut-section-3-content-div" class="set-display-none">
      <div class="tools-columns-right-section">
        <h3 id="tool-gut-about-text"></h3>
        <div class="tools-columns-right-subsection">
          <div class="tools-text-paragraphs">
            <p id="tool-gut-about-1-text"></p>
            <p id="tool-gut-about-2-text"></p>
          </div>
          <button id="tool-gut-open-pg-browser-button">
            <span id="tool-gut-open-pg-browser-button-text"></span>
          </button>
        </div>
      </div>
    </div>
    <!-- donate -->
    <div id="tool-gut-section-4-content-div" class="set-display-none">
      <div class="tools-columns-right-section">
        <h3 id="tool-gut-donate-text"></h3>
        <div class="tools-columns-right-subsection">
          <div class="tools-text-paragraphs">
            <p id="tool-gut-donate-1-text"></p>
          </div>
          <button id="tool-gut-open-donate-browser-button">
            <span id="tool-gut-open-donate-browser-button-text"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
